<template>
  <div class="main1">
    <div class="checkhead">
      <h1 class="stitle">舱单查询</h1>
      <div class="search">
        <input type="text" v-model="voyageNo" placeholder="请输入运输工具编号和航次号">
        <a @click="search">
          <x-icon type="ios-search-strong" size="32" class="btnsearch"></x-icon>
        </a>
      </div>
    </div>
    <div class="checkpic" v-if="!hasData">
      <p>企业可以通过运输工具编号和航次号查询该船舶舱单的申报状态。</p>
      <img src="../assets/images/check.png" alt>
    </div>

    <div class="biaodan" v-else>
      <div class="weui-cells__title">查询结果</div>
      <div class="vux-form-preview weui-form-preview">
        <div class="weui-form-preview__hd">
          <label class="weui-form-preview__label">船舶舱单</label>
          <em class="weui-form-preview__value">{{data.manifestNo}}</em>
        </div>
        <div class="weui-form-preview__bd">
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">航次</label>
            <span class="weui-form-preview__value">{{data.voyNo}}</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">申报日期</label>
            <span class="weui-form-preview__value">{{data.declareDate}}</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">船名</label>
            <span class="weui-form-preview__value">{{data.shipName}}</span>
          </div>
          <div class="weui-form-preview__item">
            <label class="weui-form-preview__label">申报状态</label>
            <span
              class="weui-form-preview__value"
              v-bind:class="{'orangefont':data.declareStatus=='审核中','redfont' : data.declareStatus=='未通过','greenfont': data.declareStatus=='已通过'}"
            >{{data.declareStatus}}</span>
          </div>
        </div>
      </div>
    </div>

    <router-view name="footer"></router-view>
  </div>
</template>
<script>
import { cookie } from "vux";

export default {
  name: "check_mainfest",
  data() {
    return {
      voyageNo: "",
      data: {},
      hasData: false
    };
  },
  methods: {
    search() {
      // let userInfo = cookie.get("userinfo");
      // userInfo = userInfo ? JSON.parse(userInfo) : {};
      let voyageNo = this.voyageNo;
      if (!voyageNo) {
        this.$vux.toast.text("请输入运输工具编号和航次号");
        return;
      }
      this.$http({
        url: "/infService/shippingBill",
        // headers: {
        //   "x-token": userInfo.token
        // },
        params: {
          voyageNo: voyageNo
        }
      }).then(resp => {
        if (resp.code === 200) {
          this.data = resp.data;
          this.hasData = true;
        } else {
          this.$vux.toast.text(resp.message);
          this.hasData = false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../styles/weui/widget/weui_cell/weui_form/weui-form-preview.less";
.vux-form-preview {
  overflow: hidden;
}
</style>

